import styled from "styled-components";

export const HomeBox = styled.div`
    position: fixed;
    height: 100%; 
    width: 100%; 
    bottom: 0;
`

export const HotCateBox = styled.div`
    margin-top: .1rem;
  background: #fff;
  >div:nth-of-type(1){
    padding: .1rem;
    font-weight: bold;
    font-size: .16rem;
    color:#666;
  }

`
export const GoodfoodBox = styled.div`
    margin-top: .1rem;
  background: #fff;
  >div:nth-of-type(1){
    padding: .1rem;
    font-weight: bold;
    font-size: .16rem;
    color:#666;
    width: 100vw;
    position: relative;
    // 1px在移动端实现
    &::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      border-bottom: 1px solid #000;
      transform: scale(0.5);
      -webkit-transform-origin: top left;
    }
  }
  > div:nth-of-type(2) {
      display: flex;
      flex-wrap: wrap;
      > dl {
        width: calc(50% - 0.1rem);
        background: #fff;
        margin-right: .1rem;
        margin-bottom: .1rem;
        dt {
            img {
                width: 100%;
            }
        }
        dd {
            display: flex; 
            flex-direction: column;
            align-items: center;
            padding: .1rem;
            h3 {
            font-size: .16rem;
            }
            p {
            font-size: .12rem;
            color: #666;
            }
        }
      }

`

export const CenterBox = styled.div`
.login{
      width: 100vw;
      height: 1.75rem;
      background: #FF6C0C;
      display: flex;
      align-items:center;
      padding: 0 0.1rem;
      img{
        margin-right: 0.1rem;
      }
      div{
        color:white;
        font-weight: bold;
      }
    }
    .items{
      .logout{
        .am-list-content{
          text-align: center;
        }
      }
    }
`